<template>
    <view class="active-marquee" :style="{'animation-duration':`${list.length*3}s`}">
        <text class="prize-words" v-for="(item, index) in list" :key="index">{{item}}</text>
    </view>
</template>


<script>
    export default {
        name: 'ActiveMarquee',
        props: {
            list: Array,
            default:[]
        },

    }
</script>

<style lang="scss">
    .active-marquee {
        z-index: 1003;
        color: #ff984d;
        position: fixed;
        top: 34px;
        left: 100%;
        font-size: 28px;
        line-height: 40px;
        animation: mymove linear infinite;

        text {
            white-space: nowrap;
            padding-right: 100px;
        }
    }

    @keyframes mymove {
        from {
            transform: translate(0, 0)
        }
        to {
            transform: translate(-100%, 0)
        }
    }


</style>

